<template>
  <div class="border-line card">
    <header-title title="公租房入住率" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <template v-if="isFullscren">
        <vue-seamless-scroll
          :data="list"
          :class-option="classOption"
          class="scroll-warp">
          <div
            class="a-flex a-row-between m-b-16"
            v-for="(item,index) in list"
            :key="index"
          >
            <a-tag
              :color="index+1 === 1 ? '#ff3232' : index === 2 ? '#ff9800' : index === 3 ? '#ffd200' : '#108ee9'"
              class="m-r-10"
            >{{ index +1 }}</a-tag>
            <div class="m-r-10 text-center" style="width: 260px">
              <ellipsis :length="34" tooltip>{{ item.name }}</ellipsis>
            </div>
            <a-tooltip>
              <div slot="title">
                <div>总套数：{{ item.ZTS }}套</div>
                <div>已分配套数：{{ item.YFPTS }}套</div>
                <div>空置套数：{{ item.KZTS }}套</div>
              </div>
              <a-progress
                strokeColor="#ff3232"
                :percent="item.RZL * 100"
                size="small"
                :showInfo="false"
                style="flex: 1"
                class="m-r-10"
              />
            </a-tooltip>
            <span
              class="m-r-10 text-center text-success"
              style="width: 60px"
            >{{ `${(item.RZL * 100).toFixed(2)}%` }}</span>
          </div>
        </vue-seamless-scroll>
      </template>
      <template v-else>
        <vue-seamless-scroll
          :data="list"
          :class-option="classOption"
          class="scroll-warp">
          <div
            class="a-flex a-row-between m-b-16"
            v-for="(item,index) in list"
            :key="index"
          >
            <a-tag
              :color="index+1 === 1 ? '#ff3232' : index === 2 ? '#ff9800' : index === 3 ? '#ffd200' : '#108ee9'"
              class="m-r-10"
            >{{ index +1 }}</a-tag>
            <div class="m-r-10 text-center" style="width: 100px;font-size: 14px;">
              <a-tooltip :title="item.name">
                <ellipsis :length="14" tooltip>{{ item.simname }}</ellipsis>
              </a-tooltip>
            </div>
            <a-tooltip>
              <div slot="title">
                <div>总套数：{{ item.ZTS }}套</div>
                <div>已分配套数：{{ item.YFPTS }}套</div>
                <div>空置套数：{{ item.KZTS }}套</div>
              </div>
              <a-progress
                strokeColor="#ff3232"
                :percent="item.RZL * 100"
                size="small"
                :showInfo="false"
                style="flex: 1"
                class="m-r-10"
              />
            </a-tooltip>
            <span
              class="m-r-10 text-center text-success"
              style="width: 60px;font-size: 14px;"
            >{{ `${(item.RZL * 100).toFixed(2)}%` }}</span>
          </div>
        </vue-seamless-scroll>
      </template>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { getOccupancyStatus } from '@/api/analysis'
import { Ellipsis } from '@/components'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0
    },
    isFullscren: {
      type: Boolean,
      default: false
    }
  },
  components: {
    vueSeamlessScroll,
    headerTitle,
    Ellipsis
  },
  mounted () {
    this.fetchData()
  },
  data () {
    return {
      classOption: {
        singleHeight: 40
      },
      list: []
    }
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    }
  },
  methods: {
    fetchData () {
      getOccupancyStatus({ RegionNo: this.areaID }).then(res => {
        this.list = res.DATA
      })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
  .card {
    height: 320px;
    &-content {
      margin-top: 10px;
      height: 260px;
      overflow: hidden;
      cursor: default;
    }
  }
  /deep/ .ant-progress-inner {
    background-color: #0a337e;
  }
</style>
